// Base page layout including log, sticky footer etc

@header-side-width: 75px;
@header-side-space: @header-side-width + 20px;
@footer-height: 55px;

html {
	height: 100%;
}

body {
	height: 100%;
	margin: 0;
	border-width: 0px !important;
	overflow-x: hidden;
}

#grid-main {
	height: 100%;
}

.layout-regular #unit-main, #footer {
	padding-left: @header-side-space;
}

.layout-small #footer {
	font-size: @font-size-small;
}

.layout-regular #mobile-header {
	display: none;
}

.layout-small #header-side {
	display: none;
}

.layout-small #grid-main-header {
	display: none;
}

#header-side {
	position: fixed;
	z-index: 5;
	width: @header-side-width;
	margin-left: -@header-side-space;
}

#mobile-header {
    position: fixed;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    z-index: 5;
    top: 0;
    left: 0;
    padding: 10px 0px;
	width: 100%;
}

#notification-player-mobile {
	width: 95%;
}

#log {
	padding-right: 50px;
}

.layout-regular #log {
	max-width: 244px;
	width: 25%;
}

.layout-small #log {
	width: 100%;
}

#switch, #switch-content {
	padding: 0 !important;
}

#grid-switch {
	margin: 0px !important;
	border: 0;
	padding: 0;
}
	
ul.tabs {
	padding: 0 !important;
}

#tab-header {
	margin: 5px 0px
}

#tab-header h2 {
	 margin: 2px 0px;
 }

.sticky-footer {
	height: @footer-height;
	padding: 10px 0;
	display: none;
}

.sticky-footer-push {
	margin: 0;
	height: @footer-height;
}

.sticky-footer-wrapper {
	min-height: 100%;
	height: auto !important;
	margin: 0 auto -@footer-height;
}

.game-opacity-controller {
	.opacity-transition-reset();
	overflow: hidden;
}

div.grid-content {
	margin: 0px 0px 15px 0px !important;
	padding: 15px;
}

div.grid-content .grid .unit {
	padding-top: 0;
	padding-bottom: 0;
}

.layout-small .hide-in-small-layout {
	display: none;
	visibility: hidden;
}

.hide-from-visual-layout {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
